/* 对单个组件的操作
 *componentHandle.js
 */
 import {getId} from '../../utils/H5helper';

export function addNewLabelComp(compNum,text,background=''){
	//一个默认的label component的内容
	const labelComp={
		id:getId('label'),
		type: "label", 
	    name: "[文字框]", 
	    compNum:compNum,
	    hidden: false,
	    surface:{	
	        x: 100,
	        y: 100,
	        width: 200, 	
	        height: 50, 	
	        rotate:0,//角度
			opacity:1,//透明度 1表示完全不透明
	        background:background,//背景色 #8fc31f
	        //边框设置
	   		borderRadius: 0, 	
	        border: "solid", 	
	        borderSize: 0, 	
	        borderColor: "#00000", 	
	    },
	    attributes:{
	    	textAlign:'center',//对齐方式
			lineHeight: 2,//行高
            fontFamily:'SimSun',//字体
			fontSize:24,//字体大小
			fontColor:'#00000',//字体颜色
			bold:false,//加粗
			italic:false,//斜体
			underline:false,//下划线
			content:text //内容
	    },
	    animations: [ ],  //动画
	    events: [ ]  //事件
	};
	return Immutable.fromJS(labelComp);
}


export function addNewImageComp(compNum,src,name='',width=300,height=300){
	//一个默认的Image component的内容
	const imageComp={
		id:getId('image'),
		type: "image", 
	    name: "[图片]", 
	    compNum:compNum,
	    hidden: false,
	    surface:{	
	        x: 100,
	        y: 200,
	        width: width, 	
	        height: height,
	        rotate:0,//角度
			opacity:1,//透明度 1表示完全不透明
	        background:'',//背景色
	        //边框设置
	   		borderRadius: 0, 	
	        border: "solid",
	        borderSize: 0, 	
	        borderColor: "#00000", 	
	    },
	    attributes:{
	    	src:src,
	    	name:name,
	    	wechatRead:false
	    },
	    animations: [ ],  //动画
	    events: [ ]  //事件
	};
	return Immutable.fromJS(imageComp);
}

export function addNewTextInput(compNum){
	const textComp=	{
		id:getId('text'),
        type: "input", 	
        name: "[输入框]",
        compNum:compNum,
        description: "", 	
        hidden: false, 	
        surface: {
            x: 50, 	
            y: 150, 	
            width: 200, 	
            height: 30, 
            rotate: 0, 
            opacity: 1,
            border: "solid",
            borderRadius: 3, 	
            borderSize: 0, 		
            borderColor: "#EEEEEE"
        },
        attributes: {	
            type: "text", 	
            required: "false", 	
            name: "输入框名称", 	
            placeholder: "请填写提示文字", 	
            lineHeight: 1, 	
            fontSize: 12, 	
            color: "#333333", 	
            background: "#ffffff"	
        }, 	
        animations: [], 	
        events: []	
    };
    return Immutable.fromJS(textComp);
}

export function addNewTextarea(compNum){
	const areaComp={
            id: getId('textarea'),
            type: "textarea",
            name: "[文本域]",
            compNum:compNum,
            description: "",
            hidden: false,
            surface:{
                x: 49, 
                y: 147, 
                width: 200, 
                height: 150, 
                rotate: 0, 
                opacity: 1,
                border: "solid",
                borderColor: "#EEEEEE",
                borderRadius: 0,
                borderSize: 0
            },
            attributes: {   
                required: "false",
                name: "选项名称",
                placeholder: "请填写提示文字",
                background: "#ffffff",
                color: "#333",
                fontSize: 12,
                lineHeight: 1
            },
            animations: [],
            events: []
        };
    return Immutable.fromJS(areaComp);
}

export function addNewSelectComp(compNum){
	const selectComp={
            id:getId('select'),
            type: "select", 
            name: "[下拉框]",
            compNum:compNum,
            description: "", 
            hidden: false, 
            surface:{
                x: 50, 
                y: 400, 
                width: 200, 
                height: 30, 
                rotate: 0, 
                opacity: 1, 
                borderRadius: 0, 
                border: "solid", 
                borderSize: 0, 
                borderColor: "#000000"
            }, 
            attributes:{
                name: "选项名称", 
                options: "选项1,选项2,选项3", 
                fontSize: 12, 
                color: "#333", 
                background: "#ffffff"
            }, 
            animations: [],
            events: []
        };
    return Immutable.fromJS(selectComp);
}


export function updateComponent(state,action){
	switch (action.type) {
		//修改组件的name属性
		case 'UPDATE_COMP_NAME':
			return state.set('name',action.compName);
		//修改组件的是否显示属性
		case 'UPDATE_COMP_HIDDEN':
			return state.set('hidden',action.compHidden);
		//修改组件的attrubutes属性
		case 'UPDATE_COMP_ATTR':
			const attr=state.get('attributes').merge(action.compAttr);
			return state.set('attributes',attr);
		//修改组件的surface属性
		case 'UPDATE_COMP_SURFACE':
			const surface=state.get('surface').merge(action.compSurface);
			return state.set('surface',surface);
        //修改组件动画
        case 'UPDATE_COMP_ANIMATION':
            const animations=state.get('animations');
            let animation=animations.get(action.index);
            if(animation==null){
                animation=Immutable.fromJS({name:'',duration:1,delay:0});
            }
            animation=animation.merge(action.compAnimation);
            const newAnimations=animations.set(action.index,animation);
            return state.set('animations',newAnimations);
        //删除组件动画
        case 'DELETE_COMP_ANIMATION':
            const delAnimations=state.get('animations');
            const newBkAnimations=delAnimations.delete(action.index);
            return state.set('animations',newBkAnimations);
        //添加组件动画
        case 'ADD_COMP_ANIMATION':
            const addAnimations=state.get('animations');
            const newAddAnimations=addAnimations.push(Immutable.fromJS({name:'',duration:1,delay:0}));
            return state.set('animations',newAddAnimations);
        case 'UPDATE_COMP_EVENT':
            const events=state.get('events');
            let myevent=events.get(action.index);
            if(myevent==null){
                myevent=Immutable.fromJS({actionType:"",control:{target: "", action: ""},link:{prefix: "", url: ""}});
            }
            myevent=myevent.merge(action.compEvent);
            const newEvents=events.set(action.index,myevent);
            return state.set('events',newEvents);
		default:
			return state;
	}
}